<template>
  <div class="TableShows">
    <!--  -->
    <div class="title">
      <el-button v-if="streetFlag" type="text" class="btn-back" @click="getBackStreet">返回全区居家监测统计表</el-button>
      <div v-html="getTitle()" ref="title"></div>
    </div>
    <el-table :span-method="arraySpanMethod" :header-cell-style="getRowClass" max-height="900" :data="tableData" style="width: 100vw" :cell-style="rowStyle">
      <!-- <el-table-column  style="width: 100vw"  :render-header="getLabel" align="center"> -->
      <!-- 社区  :render-header="renderHeader"-->
      <el-table-column label="办公室" prop="deptName" width="100" />
      <el-table-column prop="deptName" fixed :label="streetFlag ? '社区' : '街道'" width="100" align="center">
        <!-- <template slot-scope="scope">
          <template v-if="scope.row.deptName==='A街道'||scope.row.deptName==='B街道'">
            <div class="row_name">
              <span>江南古运河旅游度假区管理办公司</span>
              <span>{{scope.row.deptName}}</span>
            </div>
          </template>
          <template v-else>
            <el-button style="margin: 0 5px" type="text" @click="getClicktree(scope.row)">{{ scope.row.deptName }}</el-button>
          </template>
        </template> -->
        <template slot-scope="scope">
          <el-button style="margin: 0 5px" type="text" @click="getClicktree(scope.row)">{{ scope.row.deptName }}</el-button>
        </template>
      </el-table-column>
      <!-- 街道 -->
      <el-table-column prop="allTotal" fixed label="总数" width="70" align="center"></el-table-column>
      <!-- 渲染 -->
      <!-- <template> -->
      <el-table-column v-for="(item, index) in columnData" width="70" :key="index" :label="item.name" align="center">
        <template>
          <div v-for="items in item.itemList" :key="items.prop + Math.random()">
            <el-table-column :label="items.label" :prop="items.prop" v-if="!items.hide" width="70" align="center"> </el-table-column>
          </div>
        </template>
      </el-table-column>
      <!-- </template> -->
      <!-- <el-table-column label="现有严格居家监测人数" align="center">
        <el-table-column prop="viewTotal" label="总数" width="" align="center"> </el-table-column>
        <el-table-column prop="date" label="来自中高风险地区" width="" align="center"> </el-table-column>
        <el-table-column prop="date" label="来自低风险地区" width="" align="center"> </el-table-column>
        <el-table-column prop="date" label="密接人员" width="" align="center"> </el-table-column>
        <el-table-column prop="date" label="境外人员" width="" align="center"> </el-table-column>
        <el-table-column prop="date" label="确诊或无症状人员" width="" align="center"> </el-table-column>
        <el-table-column prop="date" label="隔离点工作人员" width="" align="center"> </el-table-column>
        <el-table-column prop="date" label="其他" width="" align="center"> </el-table-column>
      </el-table-column>
      <!- 手续费 -->
      <!-- <el-table-column width="" label="现有居家健康监测人数" align="center">
        <el-table-column prop="viewTotal" label="总数" width="" align="center"> </el-table-column>
        <el-table-column prop="viewZGFXDQ" label="来自低风险地区" width="" align="center"> </el-table-column>
        <el-table-column prop="viewDFXDQ" label="来自中高风险地区" width="" align="center"> </el-table-column>
        <el-table-column prop="viewMJRY" label="高风险岗位工作人员" width="" align="center"> </el-table-column>
      </el-table-column> -->
      <!-- 第三列 -->
      <!-- <el-table-column label="现有健康监测人数" align="center">
        <el-table-column prop="lowTotal" label="总数" width="" align="center"> </el-table-column>
        <el-table-column prop="lowZGFXDQ" label="来自低风险地区" width="" align="center"> </el-table-column>
        <el-table-column prop="lowGLDGZRY" label="隔离点工作人员" width="" align="center"> </el-table-column>
        <el-table-column prop="lowJWRY" label="境外人员" width="" align="center"> </el-table-column>
        <el-table-column prop="lowJWTZRY" label="境外同住人员" width="" align="center"> </el-table-column>
        <el-table-column prop="lowCMJCZ" label="次密接触者" width="" align="center"> </el-table-column>
        <el-table-column prop="lowOther" label="其他" width="" align="center"> </el-table-column>
     </el-table-column> -->
      <!-- 核酸监测列 -->
      <el-table-column prop="fromTest1" label="已完成一次核酸监测" width="" align="center"> </el-table-column>
      <el-table-column prop="fromTest2" label="已完成二次核酸监测" width="" align="center"> </el-table-column>
      <el-table-column prop="fromTest3" label="已完成三次核酸监测" width="" align="center"> </el-table-column>
      <el-table-column prop="fromTest4" label="已完成四次核酸监测" width="" align="center"> </el-table-column>
      <el-table-column fixed="right" prop="fromTest5" label="已完成五次核酸监测" width="" align="center"> </el-table-column>
      <!-- </el-table-column> -->
    </el-table>
  </div>
</template>
<script>
import { tableData, streeData } from './data'
import { column } from './column'
import { throttle } from './throttle'
export default {
  data() {
    return {
      //   tableData: [],
      columnData: column,
      streetName: '', // 街道名称
      streetFlag: false,
      streeData: [],
      listData: [tableData, streeData],
      timeNull: null
    }
  },
  computed: {
    tableData() {
      if (!this.streetFlag) {
        return tableData
      } else {
        return streeData
      }
    }
  },
  methods: {
    throttle: throttle,
    //   throttle(func, wait){
    //     let previous = 0
    // return function() {
    //   const now = Date.now()
    //   const context = this
    //   const args = arguments
    //   if (now - previous > wait) {
    //     func.apply(context, args)
    //     previous = now
    //   }
    // }
    //   },
    // 表格居中
    rowStyle() {
      return 'text-align:center'
    },
    // 表格合并,需要合并的地方是第7列到第12列的第1行,数组下标是从0开始,所以行是0开始算,列是从7列开始算
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 7 || columnIndex === 6 || columnIndex === 8 || columnIndex === 9 || columnIndex === 10 || columnIndex === 11 || columnIndex === 12) {
      //   if (rowIndex === 0) {
      //     return [2, 1]
      //   } else if (rowIndex === 1) {
      //     return [0, 0]
      //   }
      // }
      // if (columnIndex === 0) {
      //   if (rowIndex <= 3) {
      //     return [2, 0]
      //   }
      // }
    },
    getRowClass({ rowIndex, columnIndex }) {
      if (rowIndex === 0 || rowIndex === 1 || rowIndex === 2) {
        return 'background:rgb(204,204,204);color:#333;'
      }
    },
    getLabel(h, { column, $index }) {
      const T = new Date()
      const y = T.getFullYear()
      const m = T.getMonth() < 10 ? '0' + T.getMonth() : T.getMonth()
      const d = T.getDate() < 10 ? '0' + T.getDate() : T.getDate()
      const h1 = T.getHours() < 10 ? '0' + T.getHours() : T.getHours()
      const M = T.getMinutes() < 10 ? '0' + T.getMinutes() : T.getMinutes()
      const s = T.getSeconds() < 10 ? '0' + T.getSeconds() : T.getSeconds()
      return h('div', {
        domProps: {
          innerHTML: `全区居家监测统计表&nbsp;( <span style="color:red;">截止时间: ${y}-${m}-${d}   &nbsp;${h1}:${M}:${s}</span> )`
        }
      })
    },
    renderHeader(h, { column, $index }) {
      console.log(column, $index, '数据')
    },
    getTitle() {
      const T = new Date()
      const y = T.getFullYear()
      const m = T.getMonth() < 10 ? '0' + (T.getMonth() + 1) : T.getMonth()
      const d = T.getDate() < 10 ? '0' + T.getDate() : T.getDate()
      const h1 = T.getHours() < 10 ? '0' + T.getHours() : T.getHours()
      const M = T.getMinutes() < 10 ? '0' + T.getMinutes() : T.getMinutes()
      const s = T.getSeconds() < 10 ? '0' + T.getSeconds() : T.getSeconds()
      return `${this.streetFlag ? this.streetName : '全区居家'}监测统计表&nbsp;( <span style="color:red;">截止时间: ${y}-${m}-${d}   &nbsp;${h1}:${M}:${s}</span> )`
    },
    // 点击街道
    getClicktree(row) {
      if (this.streetFlag) return
      this.streetName = row.deptName
      this.streetFlag = !this.streetFlag
    },
    // 点击返回街道
    getBackStreet() {
      this.streetName = ''
      this.streetFlag = !this.streetFlag
    },
    //
    //  sumbit:throttle(function(){
    //    this.getAdd()
    //  },3000),
    getAdd() {
      console.log('我是方法触发')
    }
  },
  mounted() {
    //    this.timeNull=   setInterval(()=>{
    //          this.$refs.title.innerHTML=this.getTitle()
    //          console.log('定时器')
    //       },1000)
  },
  destroyed() {
    clearInterval(this.timeNull)
  }
}
</script>
<style scoped>
/* /deep/ .el-table th.el-table__cell > .cell {
  padding: 0 !important;
  font-size: 12px;
  visibility: inherit !important;

}
/deep/ .is-hidden {
  visibility: inherit !important;
} */
.fix {
  width: 100vw;
  z-index: -10;
}
.title {
  background-color: rgb(204, 204, 204);
  height: 50px;
  line-height: 50px;
  position: relative;
}
.btn-back {
  position: absolute;
  left: 3%;
  top: 50%;
  transform: translate(0, -50%);
}
.row_name {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.row_name span {
  flex: 1;
  color: #409eff;
}
.row_name span:nth-child(2) {
  /* border-left: 1px solid #ccc; */
}
</style>
